<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link rel="Bookmark" href="/favicon.ico">
		<link rel="Shortcut Icon" href="/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="../static/h-ui/css/H-ui.min.css" />
		<link rel="stylesheet" type="text/css" href="../static/h-ui.admin/css/H-ui.admin.css" />
		<link rel="stylesheet" type="text/css" href="../lib/Hui-iconfont/1.0.8/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../static/h-ui.admin/skin/default/skin.css" id="skin" />
		<link rel="stylesheet" type="text/css" href="../static/h-ui.admin/css/style.css" />
		<link rel="stylesheet" type="text/css" href="../lib/layui/css/layui.css">
		<link rel="stylesheet" href="../lib/zTree/v3/css/zTreeStyle/zTreeStyle.css">
		<style>
			.icon_td {
				height: 35px;
				width: 35px;
				border: 1px solid #efeaea;
				text-align: center;
				font-size: 20px;
				border: 1px solid #DDDDDD;
			}
			
			.icon_td:hover {
				border: 1px solid #AAAAAA;
				cursor: pointer;
			}
		</style>

		<title>新增资源</title>
	</head>

	<body>
		<div class="page-container">

			<div id="iconDiv" class="hide" style="position:absolute;width:800px;height:500px;bottom:20%;right:23%;z-index: 100;background-color: #EEEEEE;border: 1px solid #888888;padding:5px;">
			</div>

			<form id="addForm" class="layui-form" lay-filter="addForm">
				<input type="hidden" id="ftoken" name="token" />
				<input type="hidden" id="ftokenUserId" name="tokenUserId" />
				<input type="hidden" id="update_id" name="id" />
				<input type="hidden" id="pid" name="pid" />

				<div class="layui-form-item">
					<label class="layui-form-label">资源名称</label>
					<div class="layui-input-block">
						<input id="name" type="text" name="name" lay-verify="name" placeholder="请输入资源名称" autocomplete="off" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">类型</label>
					<div class="layui-input-block">
						<select id="type" name="type" lay-filter="type">
							<option value="0">菜单</option>
							<option value="1">功能</option>
						</select>
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">url</label>
					<div class="layui-input-block">
						<input id="url" type="text" name="url" placeholder="请输入url" autocomplete="off" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">上级资源名称</label>
					<div class="layui-input-block" style="position: relative;">
						<input id="parentNodeName" type="text" name="parentNodeName" onclick="initSetPartentNode();" lay-verify="parentNodeName" autocomplete="off" class="layui-input" readonly="readonly" style="cursor: pointer;">
						<div>
							<div id="parentNodeZtree" style="background-color:#f2f2f2;position: absolute;width:99.85%;z-index: 10;border: 1px solid #BBBBBB;margin-top: 4px;display: none;min-height: 100px;">
								<ul id="myZtree" class="ztree"></ul>
								<a style="cursor: pointer;position: absolute;top: 5px;right:35px;font-size: 12px;color:blue;" onclick="refashZtree();">刷新</a>
								<a style="cursor: pointer;position: absolute;top: 5px;right: 5px;font-size: 12px;color:blue;" onclick="hideParentNode();">关闭</a>
							</div>
						</div>
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">图标</label>
					<div class="layui-input-block">
						<div class="layui-input" style="padding: 5px;width:3%;float: left;text-align: center;font-size:20px;">
							<i id="showIcon" class="icon Hui-iconfont"></i>
						</div>
						<input id="icon" type="text" name="icon" lay-verify="icon" onclick="showIcons();" placeholder="--请选择图标--" autocomplete="off" class="layui-input" readonly="readonly" style="width:95%;float: right;cursor: pointer;">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">排序</label>
					<div class="layui-input-block">
						<input id="sort" type="number" name="sort" lay-verify="sort" placeholder="请输入排序序号" autocomplete="off" class="layui-input">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">状态</label>
					<div class="layui-input-block">
						<select id="status" name="status" lay-filter="status">
							<option value="1">正常</option>
							<option value="0">禁用</option>
						</select>
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">描述</label>
					<div class="layui-input-block">
						<textarea id="description" name="description" lay-verify="description" placeholder="请输入描述内容" class="layui-textarea"></textarea>
					</div>
				</div>

				<div class="layui-form-item text-c">
					<button class="layui-btn" lay-submit="" lay-filter="btnSubmit">保存</button>
					<button class="layui-btn" type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</form>
		</div>

		<!--_footer 作为公共模版分离出去-->
		<script type="text/javascript" src="../lib/jquery/1.9.1/jquery.min.js"></script>
		<script type="text/javascript" src="../lib/layer/2.4/layer.js"></script>
		<script type="text/javascript" src="../static/h-ui/js/H-ui.min.js"></script>
		<script type="text/javascript" src="../static/h-ui.admin/js/H-ui.admin.js"></script>
		<!--/_footer 作为公共模版分离出去-->
		<script type="text/javascript" src="../lib/layui/layui.js"></script>
		<script type="text/javascript" src="../lib/zTree/v3/js/jquery.ztree.all-3.5.js"></script>
		<script type="text/javascript" src="../static/js/common.js"></script>
		<!--请在下方写此页面业务相关的脚本-->
		<script type="text/javascript">
			var update_id = parent.$("#update_id").val();
			var isAdd = parent.$("#isAdd").val();
			$(function() {
				$("#ftoken").val(token);
				$("#ftokenUserId").val(userId);
				if(isAdd) {
					$("#pid").val(update_id);
					$("#parentNodeName").val(parent.$("#parentNodeName").val());
				} else {
					$("#update_id").val(update_id);
					//回显数据
					var data = {
						"token": token,
						"tokenUserId": userId,
						"id": update_id
					};
					request_ajax("POST", admin_url + "/scaPermission/perminssionInfo", data, function(result) {
						var datani = {
							"token": token,
							"tokenUserId": userId,
							"id": result.data.pid
						};
						request_ajax("POST", admin_url + "/scaPermission/perminssionInfo", datani, function(result) {
							$("#parentNodeName").val(result.data.name);
						});
						$("#pid").val(result.data.pid);
						$("#name").val(result.data.name);
						$("#type").val(result.data.type);
						$("#sort").val(result.data.sort);
						$("#url").val(result.data.url);
						$("#icon").val(result.data.icon);
						$("#showIcon").addClass("icon Hui-iconfont " + result.data.icon);
						$("#description").val(result.data.description);
						$("#status").val(result.data.status);
						$("#name").val(result.data.name);
					});
				}
				$("#iconDiv").load("../root/icon.html");
			});

			layui.use(['form'], function() {
				var form = layui.form;
				//自定义验证规则
				form.verify({
					/*userName: function(value) {
						if(value.length < 6) {
							return '登录用户名长度不能少于6位';
						}
					}*/
				});

				//监听提交
				form.on('submit(btnSubmit)', function(e) {
					var url = admin_url + "/scaPermission/updPerminssion";
					if(isAdd) {
						url = admin_url + "/scaPermission/addPerminssion";
					}
					var nodeName = $("#name").val();
					request_ajax("POST", url, e.field, function(result) {
						layer.msg(result.msg, {
							time: 800,
							end: function() {
								var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
								parent.layer.close(index); //再执行关闭   
							}
						});
						if(isAdd) {
							expandNode();
						} else {
							updateNode(nodeName);
						}
					});

					return false;
				});

			});

			function updateNode(value) {
				var treeObj = parent.$.fn.zTree.getZTreeObj("myZtree");
				var nodes = treeObj.getSelectedNodes();
				if(nodes.length > 0) {
					nodes[0].name = value;
					treeObj.updateNode(nodes[0]);
				}
				return false;
			}

			//重新加载选中节点，并展开
			function expandNode() {
				var treeObj = parent.$.fn.zTree.getZTreeObj("myZtree");
				var nodes = treeObj.getSelectedNodes();
				if(nodes.length > 0) {
					treeObj.reAsyncChildNodes(nodes[0], "refresh"); //刷新数据并展开
				}
				return false;
			}

			var iconIndex;

			function showIcons() {
				iconIndex = layer.open({
					title: "选择图标",
					type: 1,
					area: ['48%', '60%'],
					content: $("#iconDiv").html()
				});
			}

			function choseIcon(className) {
				$("#showIcon").removeClass();
				$("#showIcon").addClass("icon Hui-iconfont " + className);
				$("#icon").val(className);
				layer.close(iconIndex);
			}

			var myZtree;
			var zNodes;
			var setting = {
				async: {
					enable: true,
					url: admin_url + "/scaPermission/getPerminssionZtree",
					autoParam: ["id"],
					otherParam: {
						"token": token,
						"tokenUserId": userId
					},
					dataFilter: filter
				},
				check: {
					enable: false,
					autoCheckTrigger: true
				},
				data: {
					simpleData: {
						enable: true
					}
				},
				edit: {
					enable: false,
					editNameSelectAll: true,
				},
				view: {
					selectedMulti: false,
					nameIsHTML: false
				},
				callback: {
					beforeClick: function(treeId, treeNode, clickFlag) {
						return(treeNode.click != false);
					},
					onClick: zTreeOnClick
				}
			};

			function zTreeOnClick(event, treeId, treeNode) {
				$("#pid").val(treeNode.id);
				$("#parentNodeName").val(treeNode.name);
				hideParentNode();
			};

			function filter(treeId, parentNode, childNodes) {
				return childNodes.data
			};

			//隐藏父节点选择ztree
			function hideParentNode() {
				$("#parentNodeZtree").hide();
			}

			function initSetPartentNode() {
				if(!myZtree) {
					myZtree = $.fn.zTree.init($("#myZtree"), setting, zNodes);
				}
				$("#parentNodeZtree").show();
			}

			function refashZtree() {
				myZtree = $.fn.zTree.init($("#myZtree"), setting, zNodes);
			}
		</script>
	</body>

</html>